<template>
  <el-container>
    <div class="background"></div>
    <NavBar></NavBar>
    <keep-alive>
      <div style="margin-top: 70px;">
        <router-view></router-view>
      </div>
    </keep-alive>
    <el-footer height="40px">
      <Footer></Footer>
    </el-footer>
  </el-container>
</template>

<script>
import NavBar from './NavBar.vue'
import Footer from './Footer.vue'

export default {
  components: {
    NavBar,
    Footer
  }
}
</script>

<style scoped>
.background {
  position: fixed;
  width: 100%;
  height: 120vh;
  top: 0;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background: linear-gradient(90deg,rgba(247,149,51,.1) 0,rgba(243,112,85,.1) 15%,rgba(239,78,123,.1) 30%,rgba(161,102,171,.1) 44%,rgba(80,115,184,.1) 58%,rgba(16,152,173,.1) 72%,rgba(7,179,155,.1) 86%,rgba(109,186,130,.1) 100%);;
  z-index: -1;
}
</style>
